<template>
  <UserInfoComp>
    <div>用户菜单</div>
  </UserInfoComp>

  <!-- <div v-if="loginUser.login">
    <img
      v-if="loginUser.tbUserInfo.img"
      :src="loginUser.tbUserInfo.img"
      alt=""
    />
    <img
      v-else
      src="https://cn.bing.com/images/search?view=detailV2&ccid=IUrpbJ4H&id=E98EFDE420E381E8D32EF06AE641C1F303CC9E28&thid=OIP.IUrpbJ4HZfVO4zKJFiqI3QHaHc&mediaurl=https%3a%2f%2fk.sinaimg.cn%2fn%2fsinakd20220708s%2f583%2fw690h693%2f20220708%2fc4ef-a7eb1a66406f59c89efafecb749def6a.jpg%2fw700d1q75cms.jpg%3fby%3dcms_fixed_width&exph=693&expw=690&q=%e5%b0%8f%e6%b5%b7%e7%8b%b8&simid=608005191736327229&FORM=IRPRST&ck=0E18F1EB5A57B4589F867A6B6C64F4A3&selectedIndex=0&idpp=overlayview&ajaxhist=0&ajaxserp=0"
      alt=""
    />
    <br />
  </div> -->

  <!-- <hr /> -->
  <el-col :span="12">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <el-icon><icon-menu /></el-icon>
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3" disabled>
          <el-icon><document /></el-icon>
          <span>Navigator Three</span>
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon><setting /></el-icon>
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </el-col>
</template>

<script lang="ts" setup>
//获取状态管理中的用户信息
import { storeToRefs } from 'pinia';
import { store } from '../../store/index';
import UserInfoComp from '../../components/UserInfoComp.vue';
import {
  ElFormItem,
  ElInput,
  ElButton,
  ElMessageBox,
  FormInstance,
  FormRules,
  ElForm,
} from 'element-plus';

import { ref } from 'vue';
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue';

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// const { loginUser } = storeToRefs(store());
</script>

<style lang="scss" scoped>
// img {
//   width: 5rem;
// }


.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 260px;
  min-height: 790px;
  margin: 0px;
}
</style>
